<template>
  <div>
    <lb-title></lb-title>
    <div class="page-main">
      <el-form
        v-loading="firstLoading"
        @submit.native.prevent
        :model="upgradeInfo"
        label-width="150px"
        class="config-form"
      >
        <lb-classify-title title="基本信息"></lb-classify-title>

        <div style="height: 20px"></div>
        <el-form-item label="站点名称">
          <span>{{ upgradeInfo.data.domain.title }}</span>
        </el-form-item>
        <el-form-item label="授权域名">
          <span>{{ upgradeInfo.data.domain.url }}</span>
        </el-form-item>
        <el-form-item label="授权使用时间">
          <span>{{ upgradeInfo.data.domain.use_time | handleTime }}</span>
        </el-form-item>
        <el-form-item label="更新到期时间">
          <span>{{
            upgradeInfo.data.domain.update_service_time | handleTime
          }}</span>
        </el-form-item>
        <div style="height: 20px"></div>
        <div v-if="upgradeInfo.data.version">
          <lb-classify-title title="版本更新"></lb-classify-title>
          <el-form-item label="创建时间">
            <span>{{ upgradeInfo.data.version.create_time }}</span>
          </el-form-item>
          <el-form-item label="版本名称">
            <span>{{ upgradeInfo.data.version.title }}</span>
          </el-form-item>
          <el-form-item label="更新说明">
            <el-input
              type="textarea"
              show-word-limit
              autosize
              :readonly="true"
              resize="none"
              v-model="upgradeInfo.data.version.description"
            ></el-input>
          </el-form-item>
          <div style="height: 20px"></div>
          <lb-classify-title title="版本号"></lb-classify-title>
          <div style="height: 20px"></div>
          <el-form-item label="当前版本">
            <span>{{ upgradeInfo.location_version_no }}</span>
          </el-form-item>
          <el-form-item label="最新版本">
            <span>{{ upgradeInfo.data.version.no }}</span>
            <lb-button
              v-if="
                upgradeInfo.is_upgrade === true &&
                upgradeInfo.location_version_no !== upgradeInfo.data.version.no
              "
              type="danger"
              :loading="loading"
              plain
              @click="updateSysVersion"
              style="margin-left: 20px"
              >更新系统</lb-button
            >
          </el-form-item>
          <div style="height: 30px"></div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  inject: ['reload'],
  data () {
    return {
      firstLoading: false,
      loading: false,
      upgradeInfo: {},
      configForm: {
        website_keys: '',
        version_name: '0',
        newest_version_name: '0',
        type: 'get'
      },
      configFormRules: {
        website_keys: {
          required: true,
          type: 'string',
          message: '请输入站点信息',
          trigger: 'blur'
        }
      },
      isWe7: window.lbConfig.isWe7
    }
  },
  created () {
    this.getUpgradeInfo()
  },
  methods: {
    async getUpgradeInfo () {
      this.firstLoading = true
      let { code, data } = await this.$api.getUpgradeInfo()
      this.firstLoading = false
      if (code !== 200) return
      if (data.code !== 20000) {
        this.$message.error(data.msg)
        return
      }
      this.upgradeInfo = data
    },
    async updateSysVersion () {
      this.loading = true
      let { code, data } = await this.$api.upgrade()
      this.loading = false
      if (code !== 200) return
      if (data.code && data.code === -1) {
        this.$message.error(data.msg)
        return
      }
      this.$message.success('更新成功！')
      this.reload()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px;
  span,
  .el-textarea {
    margin-left: 10px;
    max-width: 800px;
  }
}
</style>
